

<template>
  <div class="detail">
    <div class="tablesB" v-if="dialogTitle == '采购详情'">
      <el-table :data="dataDetail.drug_item" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['purchaseApply']['detail']">
          <el-table-column
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :key="index + item"
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div
      class="tablesB"
      v-if="dialogTitle == '采购申请新增' || dialogTitle == '采购申请修改'"
    >
      <div class="selects">
        <div v-if="dialogTitle == '采购申请修改'">
          <div>申请单号：</div>
          <div>
            <el-input v-model="dataDetail.number"  :disabled="true"> </el-input>
          </div>
        </div>
       
        
      <div style="width:500px">
              <div>到货时间：</div>
          <el-date-picker
           value-format="yyyy-MM-dd"
            v-model="dataDetail.arrival_date"
             type="date"
            start-placeholder="到货时间"
            
          >
          </el-date-picker>
        </div>

        <div>
          <div>备注：</div>
          <div>
            <el-input v-model="dataDetail.remark" placeholder="请输入备注" > </el-input>
          </div>
        </div>
          

            
      </div>
      <div class="selectTables">
              <div style="margin-right:20px">选择药品</div>
              <el-popover placement="bottom-end" width="500px" trigger="focus">
                <el-input
                  placeholder="选择药品"
                  slot="reference"
                  v-model="selectParams.keyword"
                  @input="getDrugItem()"
                >
                  <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>

                <el-table
                  v-loading="threeSelectLoading"
                  height="300"
                   @current-change="xuanzeDataThree"
                  highlight-current-row
                  :data="selectData.selectData2"
                  style="width: 100%"
                >
             
                  <el-table-column type="index" width="70" label="序号">
                  </el-table-column>
                  <el-table-column label="药品名称" prop="name" width="150">
                  </el-table-column>
                   <el-table-column
                    label="规格"
                    prop="specification"
                    
                  >
                  </el-table-column>
             <el-table-column
                    label="单位"
                    prop="base_unit"
                  
                  >
                  </el-table-column>
                 
                    <el-table-column
                    label="国药准字"
                    prop="drug_code"
                    
                  >
                  </el-table-column>
                 
                </el-table>
                <el-pagination
                  :current-page="selectParams.page"
                  :page-size="selectParams.limit"
                  @current-change="handlePagination"
                  :total="selectParams.pageCount"
                  layout="prev, pager, next"
                >
                </el-pagination>
              </el-popover>
            </div>
      <div>
            <el-table :data="tableData2" style="width: 100%">
              <template v-for="(item, index) in $baseBai['purchaseApply']['updateList']">
               
               
               

                  <el-table-column
                  v-if="item.prop == 'num'"
                  :width="item.width"
                  
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                     
                       <el-input-number v-model="scope.row.num" controls-position="right"  :min="0"></el-input-number>
                    </span>
                  </template>
                </el-table-column>


   <el-table-column
                  v-else-if="item.prop == 'price'"
                  :width="item.width"
                  
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                     
                       <el-input-number v-model="scope.row.price" controls-position="right"  :min="0"></el-input-number>
                    </span>
                  </template>
                </el-table-column>
                
              
              

                <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'remark'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <span>
                        <el-input
                          v-model="scope.row.remark"
                          placeholder="备注"
                        ></el-input>
                      </span>
                    </span>
                  </template>
                </el-table-column>
                  <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'fill_no'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <span>
                        <el-input
                          v-model="scope.row.fill_no"
                          placeholder="请输入批号"
                        ></el-input>
                      </span>
                    </span>
                  </template>
                </el-table-column>

                <el-table-column
                  :width="item.width"
                  v-else
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                </el-table-column>
              </template>

              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData2)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="buts" >
                 <div> <el-button  @click="thatF.Detail_Show=false">取消</el-button></div>
                 <div> <el-button class="butB_Add" @click="save" >保存</el-button></div>
            </div>
    </div>
      
  </div>
</template>
<script>
let t;
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      params:{
        number:'',
        remark:'',
        arrival_date:'', 
      },
       selectParams: {
        keyword: "",
        page: 1,
        limit: 15,
        pageCount: 0,
      },
      selectData:{
        selectData2: [],
      },
          tableData2: [],
       threeSelectLoading: false,
    };
  },
  mounted(){
    this.getDrugItem();
    if(this.dialogTitle == '采购申请修改'){
      this.tableData2=this.dataDetail.drug_item.map(v=>{
        return {
          ...v,
          price:v.buy_price
        }
      });
    }
    
  },
  props: ["dialogTitle",'thatF'],
  methods: {
     save(){
       console.log('this.params.arrival_date',this.params.arrival_date)
       if(this.tableData2.length<=0){
         return  this.$message.error('请选择药品信息');
       }
       if(!this.dataDetail.arrival_date){
        return  this.$message.error('请选择到货时间');
       }
      
        for (const v of this.tableData2) {
          if(!v.num){
           return  this.$message.error('请输入数量');
         }
    
        }
        let d={
          arrival_date:this.dataDetail.arrival_date,
          remark:this.dataDetail.remark,
          drug_items:this.tableData2.map(v=>{
            return {
              drug_id:v.id,
              num:v.num,
              fill_no:v.fill_no,
              remark:v.remark,
              buy_price:v.price
            }
          })
        }
     
        if(this.dialogTitle == '采购申请修改'){
          d.id=this.dataDetail.id;
        }
   
          this['_API'].getdrug_purchaseSave(d).then(res=>{
            if(res.code==200){
              this.thatF.Detail_Show=false
                this.$message({
                message: res.message,
                type: 'success'
              });
              setTimeout(()=>{
                 this.thatF.params.page=1;
                this.thatF.getList()
              },500)
             
            }
          })
      //  getdrug_purchaseSave
     },
      deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handlePagination(e) {
      this.threeSelectLoading = true;
      this.selectParams.page = e;



         this.getDrugItem();
  
     
    },
      xuanzeDataThree(item) {
       if( this.tableData2.findIndex(res=>res.id==item.id)===-1){
        this.tableData2 = this.tableData2.concat(item);
     }
      
    
    },
      getDrugItem() {
      let d = {
        keyword: this.selectParams.keyword,
        page: this.selectParams.page,
        limit: this.selectParams.limit,
      };

      this["_API"].getdrugDrugIndex(d).then((res) => {
        if (res.code == 200) {
          this.selectData.selectData2 = res.data.list.map(v=>{
            return {
              ...v,

              fill_no:'', 
              num:0,
              price:v.price,
            }
          });

      
          this.selectParams.pageCount = res.data.count;
          this.threeSelectLoading = false;
        }
      });
    },
  },
  computed: {
    ...mapState({
      dataDetail: (state) => state.storage.dataDetail,
    }),
  },

};
</script>
<style lang='scss' scoped>
.addUdetailpdate {
  padding: 0 5%;
}
/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}
.selects {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 300px;
    display: flex;
    align-items: center;
  }
}
.selectTables{
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
 
}
.buts{
    display: flex;
    margin-top: 50px;
    justify-content: center;
    >div{
        margin-right: 20px;
    }
}
</style>